<div style="margin-top:30px;" v-if="status">

	<!-- 掉线警告 -->
	<a-alert v-if="!status.connect" message="警告" description="屏幕掉线啦！！！"
		type="warning" showIcon style="margin-bottom:15px;"
	></a-alert>

	<a-row v-if="status" style="margin-top:30px;">
		<a-button type="primary" @click="btnPlay">播放</a-button>
		<a-button @click="btnPause">暂停</a-button>
		<a-button type="danger" @click="btnStop">停止</a-button>
	</a-row>

	<a-card style="margin-top:30px;">
		<p>
			<b>编辑飘带</b>：
			<i>编辑飘带的各个选项，包括飘带数量、亮度、速度等，让飘带显示的效果不同吧。</i>
		</p>
		<a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
			<a-form-item label="颜色饱和度">
				<a-input v-model.number="colorSaturation" type="number" :min="0" :max="100" @afterChange="onEdit"></a-input>
			</a-form-item>
			<a-form-item label="颜色亮度">
				<a-input v-model.number="colorBrightness" type="number" :min="0" :max="100" @afterChange="onEdit"></a-input>
			</a-form-item>
			<a-form-item label="颜色透明度">
				<a-input v-model.number="colorAlpha" type="number" :min="0" :max="100" @afterChange="onEdit"></a-input>
			</a-form-item>
			<a-form-item label="变色速度">
				<a-input v-model.number="colorCycleSpeed" type="number" :min="1" @afterChange="onEdit"></a-input>
			</a-form-item>
			<a-form-item label="飘带起始位置">
				<a-select default-value="center" v-model="verticalPosition" @afterChange="onEdit">
					<a-select-option value="center" key="center">中间</a-select-option>
					<a-select-option value="top"    key="top"   >顶端</a-select-option>
					<a-select-option value="bottom" key="bottom">底端</a-select-option>
					<a-select-option value="random" key="random">随机</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="飘带生长速度">
				<a-input v-model.number="horizontalSpeed" type="number" :min="1" @afterChange="onEdit"></a-input>
			</a-form-item>
			<a-form-item label="飘带数量">
				<a-input v-model.number="ribbonCount" type="number" :min="1" @afterChange="onEdit"></a-input>
			</a-form-item>
			<a-form-item label="飘带描边大小">
				<a-input v-model.number="strokeSize" type="number" :min="0" @afterChange="onEdit"></a-input>
			</a-form-item>
			<a-form-item :wrapper-col="{ span: 16, offset: 4 }" style="margin-bottom:6px;">
				<a-button-group>
					<a-button @click="btnAbort" >放弃修改</a-button>
					<a-button @click="btnSubmit" type="primary">提交</a-button>
				</a-button-group>
			</a-form-item>
		</a-form>
	</a-card>
	
</div>




